import { Button, Cascader, Form, Input, Select,DatePicker } from 'antd';
import React, { useState } from 'react';
import '../Conference/Reservation.scss'

const { Option } = Select;

function Reservation(props: any) {
    const residences = [
        {
            value: 'zhejiang',
            label: 'Zhejiang',
            children: [
                {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                        {
                            value: 'xihu',
                            label: 'West Lake',
                        },
                    ],
                },
            ],
        },
        {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
                {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                        {
                            value: 'zhonghuamen',
                            label: 'Zhong Hua Men',
                        },
                    ],
                },
            ],
        },
    ];
    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 8 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
        },
    };
    const [form] = Form.useForm();
    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
    };
    const tailFormItemLayout = {
        wrapperCol: {
            xs: {
                span: 24,
                offset: 0,
            },
            sm: {
                span: 16,
                offset: 8,
            },
        },
    };
    var onReset = () => { }
    var onChange = () => { }
    return (
        <div className='reservation'>
            <div className='reservation-one'>
                <div className='reservation-title-left'></div>
                <h4 className='reservation-title'>预定会议室</h4>
            </div>
            <div className='reservation-two'>
                <Form
                    {...formItemLayout}
                    form={form}
                    name="register"
                    onFinish={onFinish}
                    initialValues={{ residence: ['zhejiang', 'hangzhou', 'xihu'], prefix: '86' }}
                    style={{ maxWidth: 600 }}
                    scrollToFirstError
                >
                    <Form.Item
                        name="nickname"
                        label="会议名称"
                        rules={[{ required: true, message: '请输入', whitespace: true }]}
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item
                        name="gender"
                        label="会议室名称"
                    >
                        <Select placeholder="请选择">
                            <Option value="1">商务专用会议室</Option>
                            <Option value="2">研发部专用会议室</Option>
                            <Option value="3">设计部专用会议室</Option>
                            <Option value="4">行政部专用会议室</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="gender"
                        label="会议室时间"
                    >
                        <Select placeholder="请选择">
                            <Option value="1">提醒</Option>
                            <Option value="2">不提醒</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="gender"
                        label="会议状态"
                    >
                        <Select placeholder="请选择">
                            <Option value="1">待开始</Option>
                            <Option value="2">不提醒</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit">保存</Button>
                        <Button htmlType="button" onClick={onReset}>取消</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Reservation;